<template>
  <div ref="domRef" class="dom-wrapper"></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { BasicWorld } from './World/World';
let world: BasicWorld;
const domRef = ref(null);
onMounted(() => {
  if (domRef.value) {
    // create a new world
    world = new BasicWorld(domRef.value);
    // draw the scene
    world.start();
  }
});
onUnmounted(() => {
  world?.stop();
});
</script>

<style scoped>
.dom-wrapper {
  width: 100%;
  height: 100%;
}
</style>
